{% extends 'base.html' %}
{% block title %}
注册
{% endblock %}
{% block head %}
<style>
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
</style>

<!-- Custom styles for this template -->

{% endblock %}


{% block body %}

<body class="bg-light text-center">

  <div class="container">
    <br>
    <br>
    <div class="row order-md-2">
      <div class="col-md-4 order-md-2 mb-4">
        <div class="py-5 text-center">
          <img class="d-block mx-auto mb-4" src="{{ url_for('static',filename='images/t.svg') }}" alt="" width="72"
            height="72">
          <h2>注册一个新账号</h2>
        </div>
      </div>
      <div class="col-md-3 order-md-2">
        <form action="{{ url_for('wx.auth.register') }}" method="POST" class="needs-validation" novalidate>
          <div class="mb-3">
            <label for="username">输入用户名：</label>
            <div class="input-group">
              <input type="text" class="form-control" name="username" required>
            </div>
          </div>

          <div class="mb-3">
            <label for="email">输入邮箱地址：</label>
            <input type="text" class="form-control" name="email" placeholder="请输入真实的邮箱地址" required>
          </div>
          <div class="mb-3">
            <label for="address">输入密码：</label>
            <input type="password" class="form-control" name="password1" required>
          </div>
          <div class="mb-3">
            <label for="address2">确认密码：</label>
            <input type="password" class="form-control" name="password2" required>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="captcha1">验证码：</label>
              <input type="text" class="form-control" name="captcha1" required>
            </div>
            <div class="col-md-6 mb-3">
              <label></label>
              <img src="{{ url_for('wx.auth.captcha') }}">             
            </div>
          </div>
          <hr class="mb-4">
          <div class="row">
            <div class="col-md-6 mb-3">
              <a href="{{ url_for('wx.auth.login') }}">去登录</a>
            </div>
            <div class="col-md-6 mb-3">
              <button class="btn btn-primary btn-lg" type="submit">提交</button>              
            </div>
          </div>
        </form>
        <div class="mb-3">
          {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ message }}
          </div>
          {% endfor %}
          {% endif %}
          {% endwith %}
        </div>
      </div>
    </div>
    <footer class="my-5 pt-5 text-muted text-center text-small">
      <p class="mt-5 mb-3 text-muted">&copy; 2018-2021</p>
      <ul class="list-inline">
        <li class="list-inline-item"><a href="https://www.cnblogs.com/wxhou">博客园</a></li>
      </ul>
    </footer>
  </div>
</body>

{% endblock %}